<script setup>
import {get} from "@/net";
import {ElMessage} from "element-plus";
import router from "@/router";
import {useStore} from "@/stores/userStore";
import {ref} from "vue";

const store = useStore()
const state = ref(false)
const admin = ref(false)

state.value = store.auth.user != null;
if (state.value) {
    admin.value = store.auth.user.role === 'admin'
}


const logout = () => {
    get('/api/auth/logout', (message) => {
        ElMessage.success(message)
        store.auth.user = null
        router.push('/')
    })
}
</script>

<template>
    <div style="width: 100vw;height: 100vh;overflow: hidden;display:flex;flex-direction: column" class="banner">
        <div class="header">
            <el-row style="width: 100%;">
                <el-col :span="2">
                    <span style="color: black;font-size: 18px;font-weight:bolder;">个人博客</span>
                </el-col>
                <el-col :span="19" class="menu">
                    <ul>
                        <li @click="router.push('/index')">首页</li>
                        <li @click="router.push('/my-article')">我的文章</li>
                        <li v-if="admin" @click="router.push('/type')">文章类型</li>
                        <li v-if="admin" @click="router.push('/audit')">审核</li>
                    </ul>
                </el-col>
                <el-col :span="3">
                    <el-popover
                            :width="80"
                            popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
                    >
                        <template #reference>
                            <el-avatar
                                    style="margin-top: 5px"
                                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                        </template>
                        <template #default>
                            <div
                                    class="rich-content"
                                    style="display: flex; gap: 12px; flex-direction: column; text-align: center"
                            >
                                <el-avatar
                                        :size="50"
                                        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                                        style="margin:auto"
                                />
                                <div>
                                    <p v-if="!state" style="margin: auto; font-weight: 500">
                                        未登录
                                    </p>
                                    <p v-if="state" style="margin: auto; font-weight: 500">
                                        {{store.auth.user.username}}
                                    </p>
                                </div>
                                <el-button v-if="!state"
                                           type="success"
                                           size="small"
                                           @click="router.push('/welcome')">登录/注册</el-button>
                                <el-button v-if="state"
                                           type="primary" size="small">个人中心</el-button>
                                <el-button v-if="state"
                                           type="danger" size="small"
                                           @click="logout" style="margin: 0">退出登录</el-button>
                            </div>
                        </template>
                    </el-popover>
                </el-col>
            </el-row>
        </div>
        <el-scrollbar>
            <el-backtop target=".el-scrollbar .el-scrollbar__wrap" :right="100" :bottom="100" />
            <div class="content">
                <router-view v-slot="{ Component }">
                    <transition name="el-fade-in-linear" mode="out-in">
                        <component :is="Component" style="height: 100%"/>
                    </transition>
                </router-view>
            </div>
        </el-scrollbar>
    </div>
</template>

<style scoped>
*{
    margin: 0;
    padding: 0;
}
.banner {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-image: url("https://cdn.pixabay.com/photo/2023/02/07/13/55/forest-7774205_1280.jpg");
}
.header {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.2)
}

.menu ul {
    display: flex;
    justify-content: right;
    align-items: center;
    list-style: none;
    padding: 0;
}

.menu ul li {
    position: relative;
    width: 80px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* 防止下划线溢出 */
    cursor: pointer;
    color: black; /* 默认文字颜色 */
    font-weight: bolder;
    transition: color 0.3s ease; /* 添加文字颜色变化的动画 */
}

.menu ul li::before {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 0;
    width: 31px;
    height: 3px;
    background-color: #fdf6ba;
    border-radius: 10px;
    transform: translateX(80%);
    transition: transform 0.3s ease; /* 动画时间和效果 */
}

.menu ul li:hover {
    color: orange; /* 鼠标悬停时文字颜色变化 */
}

.menu ul li:hover::before {
    transform: translateY(100%) translateX(80%);
}

</style>